import styled from 'styled-components';
import style from '../assets/css_variable.js'
export const Wrapper = styled.div `

    width:500px;
    margin:10px auto;
    background-color: ${style.white_color};
    border:1px solid #f1f1f1;
    padding:20px;
    .comment-list {
        background: ${style.white_color};
        padding:20px;
        .comment {
            display:flex;
        }
    }
`// css in js
export const InputWrapper = styled.div `
   background-color: #fff;
   border:1px solid #f1f1f1;
   padding:20px;
   margin-bottom:10px;
   /* 方便css逻辑的封装 css 嵌套  模块化*/
   .comment-field {
       margin-bottom:15px;
       display:flex;
   }
   .comment-field-name {
    display:flex;
       flex-basis:100px;
       font-size: 14px;
   }
   .comment-field-input {
       display:flex;
       flex:1;
       input, textarea {
           border:1px solid #e6e6e6;
           border-radius: 3px;
           padding:5px;
           outline: none;
           font-size: 14px;
       }
       textarea {
           height:100px;
       }
    }

   .comment-field-button {
       display:flex;
       justify-content: flex-end;
       button {
           padding:5px 10px;
           width: 80px;
           border:none;
           border-radius: 3px;
           background-color: #00a3cf;
           color:#fff;
           outline: none;
           cursor: pointer;
           &:active {
               background-color: #13c1f1;
           }
       }
   }
`